<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <title>博客 | Anoyi 主题站</title>
    <link rel="icon" type="image/x-icon" href="https://cdn.anoyi.com/anoyi-favicon.ico">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet">
    <link href="https://anoyi.cn-sh2.ufileos.com/mdb.css" rel="stylesheet">
    <link href="https://anoyi.cn-sh2.ufileos.com/home.css" rel="stylesheet">
</head>

<body class="creative-lp">

<!-- Navigation & Intro -->
<header>
    <nav th:replace="~{common :: nav}"></nav>
</header>
<!-- Navigation & Intro -->

<!-- Main content -->
<main style="padding-top: 70px" id="app">

    <!--Blog-->
    <section id="article-box">
        <div class="container mt-5 pt-3">

            <div class="row" >

                <!--Main listing-->
                <div class="col-lg-8 col-12 mt-1 mx-lg-4">

                    <!-- Section: Classic blog listing -->
                    <section class="section classic-blog-listing">
                        <div class="row mb-5" th:each="article : ${jianshu.articles}">
                            <div class="col-md-12 text-center">
                                <div class="view overlay rounded z-depth-1 mb-3">
                                    <img th:src="${article.cover}" class="img-fluid">
                                    <a th:href="'/p/' + ${article.id}" target="_blank">
                                        <div class="mask rgba-white-slight"></div>
                                    </a>
                                </div>
                                <!--Excerpt-->
                                <!--<a href="" class="">-->
                                    <!--<h5>-->
                                        <!--<span class="badge badge-pill primary-color">Tag</span>-->
                                    <!--</h5>-->
                                <!--</a>-->
                                <h2 class="text-center font-weight-bold dark-grey-text py-3">
                                    <strong th:text="${article.title}"></strong>
                                </h2>
                                <div class="post-data text-center pb-3 grey-text">
                                    <h6>
                                        发布时间 [[ ${article.time} ]]
                                    </h6>
                                </div>
                                <p class="dark-grey-text" th:text="${article.description}">
                                </p>
                                <div class="text-center pb-2">
                                    <a class="btn btn-white btn-rounded btn-md orange-text font-weight-bold wow fadeIn waves-effect waves-light" th:href="'/p/' + ${article.id}" target="_blank">阅读全文</a>
                                </div>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!-- 加载更多 -->
                        <div class="row mb-5" v-for="article in articles">
                            <div class="col-md-12 text-center">
                                <div class="view overlay rounded z-depth-1 mb-3">
                                    <img v-bind:src="article.cover" class="img-fluid">
                                    <a v-bind:href="'/p/' + article.id" target="_blank">
                                        <div class="mask rgba-white-slight"></div>
                                    </a>
                                </div>
                                <h2 class="text-center font-weight-bold dark-grey-text py-3">
                                    <strong v-html="article.title"></strong>
                                </h2>
                                <div class="post-data text-center pb-3 grey-text">
                                    <h6>
                                        发布时间 {{article.time}}
                                    </h6>
                                </div>
                                <p class="dark-grey-text" v-html="article.description">
                                </p>
                                <div class="text-center pb-2">
                                    <a class="btn btn-white btn-rounded btn-md orange-text font-weight-bold wow fadeIn waves-effect waves-light" v-bind:href="'/p/' + article.id" target="_blank">阅读全文</a>
                                </div>
                            </div>
                        </div>
                        <!-- /加载更多 -->
                    </section>
                    <!--Section: Classic blog listing-->

                    <!-- 进度条 -->
                    <div class="row mb-5" v-if="loading">
                        <!--Big blue-->
                        <div class="preloader-wrapper big active" style="margin: 0 auto">
                            <div class="spinner-layer spinner-yellow-only">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div>
                                <div class="gap-patch">
                                    <div class="circle"></div>
                                </div>
                                <div class="circle-clipper right">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Main listing-->

                <!--Sidebar-->
                <div class="col-lg-3 col-md-3 px-4">

                    <!-- 作者 -->
                    <section class="mb-4">
                        <hr>
                        <p class="font-weight-bold dark-grey-text text-center spacing">
                            <strong th:text="${jianshu.author.nickname}"></strong>
                        </p>
                        <hr>
                        <!--Avatar-->
                        <div class="d-flex justify-content-center mt-4">
                            <img th:src="${jianshu.author.avatar}" class="img-fluid rounded img-author z-depth-1">
                        </div>
                        <!--Description-->
                        <p class="mt-3 dark-grey-text font-small text-center">
                            <em th:text="${jianshu.author.description}"></em>
                        </p>
                    </section>
                    <!-- /作者 -->

                    <!-- 专栏 -->
                    <hr>
                    <p class="font-weight-bold dark-grey-text text-center spacing">
                        <strong>专栏</strong>
                    </p>
                    <hr>
                    <section class="section mb-5">
                        <div class="text-center">
                            <a th:href="'/c/' + ${collection.slug}" class="d-inline-block" th:each="collection : ${jianshu.ownCollections}">
                                <img th:src="${collection.avatar}" class="img-fluid p-2" data-toggle="tooltip" th:title="${collection.title}" style="height: 80px; width: 80px">
                            </a>
                        </div>
                    </section>
                    <!-- /专栏 -->

                    <!-- 分类 -->
                    <hr>
                    <p class="font-weight-bold dark-grey-text text-center spacing">
                        <strong>分类</strong>
                    </p>
                    <hr>
                    <section class="archive mb-5">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <ul class="list-unstyled  mt-3">
                                    <li th:each="notebook : ${jianshu.notebooks}">
                                        <h6 class="">
                                            <a th:href="'/nb/' + ${notebook.id}" class="dark-grey-text" th:text="${notebook.name}"></a>
                                        </h6>
                                    </li>
                                    <li v-for="nb in nbs">
                                        <h6 class="">
                                            <a v-bind:href="'/nb/' + nb.id" class="dark-grey-text" v-html="nb.name"></a>
                                        </h6>
                                    </li>
                                    <li v-if="hasMoreNotebook">
                                        <h6 class="" >
                                            <a class="text-primary" @click="onMoreNotebook"> 展开更多 >> </a>
                                        </h6>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <!-- /分类 -->

                </div>
            </div>
        </div>
    </section>
    <!--/Blog-->

</main>
<!-- Main content -->

<!-- 返回顶部 -->
<section >
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-lg purple-gradient" style="display:none;" id="goTop">
            <i class="fa fa-arrow-up" aria-hidden="true"></i>
        </a>
    </div>
</section>

<!-- 网站底部 -->
<footer th:replace="~{common :: footer}"></footer>
<!-- /网站底部 -->

<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script>
    // Animation init
    new WOW().init();

    // ToolTip
    $(function () {
        $('[data-toggle="tooltip"]').tooltipster();
    });

    // 返回顶部
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop() > 500){
                $("#goTop").fadeIn(200);
            }
            else{
                $("#goTop").hide(200);
            }
        });
        $("#goTop").click(function(){
            $('html,body').animate({'scrollTop': 0 }, 500);
        });
    });

    // 监听滚动事件
    window.addEventListener('scroll', _.throttle(function () {
        if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight ){
            if (!app.end && !app.loading){
                app.loading = true;
                app.page++;
                var api =  window.location.pathname + "/" + app.page;
                $.get(api, function (response) {
                    if (response.code === 0){
                        var list = response.data.articles;
                        for(var i = 0; i <list.length; i++){
                            app.articles.push(list[i]);
                        }
                        if (list.length < 10){
                            app.end = true;
                        }
                    }
                    app.loading = false;
                })
            }
        }
    }, 500), false);

    // 博客列表
    var app = new Vue({
        el: '#app',
        data: {
            page: 1,
            articles: [],
            end: [[ ${jianshu.articles.size() < 10}]],
            loading: false,
            hasMoreNotebook: [[ ${jianshu.notebookTotalPages > 1} ]],
            hasMoreCollection: [[ ${jianshu.ownCollectionTotalPages > 1} ]],
            notebookPage: 2,
            collectionPage: 2,
            nbs: [],
            collections: []
        },
        methods: {
            onMoreNotebook: function () {
                var api =  "/nbs/" + this.notebookPage;
                $.get(api, function (response) {
                    if (response.code === 0){
                        var list = response.data.notebooks;
                        for(var i = 0; i <list.length; i++){
                            app.nbs.push(list[i]);
                        }
                        if (list.length < 10){
                            app.hasMoreNotebook = false;
                        }
                    }
                });
                this.notebookPage++;
            },
            onMoreCollection: function (){
                var api =  "/cs/" + this.collectionPage;
                $.get(api, function (response) {
                    if (response.code === 0){
                        var list = response.data.ownCollections;
                        for(var i = 0; i <list.length; i++){
                            app.collections.push(list[i]);
                        }
                        if (list.length < 10){
                            app.hasMoreCollection = false;
                        }
                    }
                });
                this.collectionPage++;
            }
        }
    })
</script>

</body>

</html>